<template>
	<el-dialog v-model="visible" title="作业信息" width="75%">
		<!-- <el-button class="btnReturn" @click="btnReturnFun(1)">返回</el-button> -->
		<div style="padding: 15px">
			<el-form>
				<el-form-item label="执行器名称：">
					<el-input disabled v-model="stateTwo.formName" placeholder="请输入执行器名称"></el-input>
				</el-form-item>
			</el-form>
			<el-divider>
				<span style="font-size: 17px"><b>这个是什么标题</b></span>
			</el-divider>
			<InfoJson ref="jobStatementRef" style="height: 300px; width: 100%"></InfoJson>
			<el-divider content-position="left">
				<span style="font-size: 15px"><b>结果日志</b></span>
			</el-divider>
			<ReadonlyStudio v-if="!!currentRow.result" id="jobErrorMsgId" :value="currentRow.result" style="height: 500px"></ReadonlyStudio>
			<el-result v-if="!!!currentRow.result" title="暂无数据" sub-title="无错误日志"> </el-result>
		</div>
	</el-dialog>
</template>

<script setup lang="ts">
import { useCrud } from '@/hooks'
import store from '@/store'
import { reactive, ref, onMounted, nextTick } from 'vue'
import { IHooksOptions } from '@/hooks/interface'

import InfoJson from '../production/readonly-studio-three.vue'

const jobStatementRef = ref()

const stateTwo = reactive({
	formName: ''
})

/**
 * 初始话加载
 */
onMounted(() => {
	//分页
})

const state: IHooksOptions = reactive({
	createdIsNeed: false,
	dataListUrl: '/data-development/task/history/page',
	deleteUrl: '/data-development/task/history',
	databaseList: [],
	clusterList: [],
	clusterConfiguratioList: [],
	queryForm: {}
})

const visible = ref(false)

//当前的作业类型
const dialect = ref('')
const init = (rowData: any) => {
	visible.value = true

	setTimeout(() => {
		dialect.value = rowData.dialect
		stateTwo.formName = rowData.jobExecuteName
		jobStatementRef.value.setEditorValue('')
		if (rowData.dataxJson) {
			console.log(jobStatementRef.value, '1')
			nextTick(() => {
				jobStatementRef.value.setEditorValue(rowData.dataxJson)
			})
		}
	}, 100)
}

defineExpose({
	init
})
</script>

<style scoped lang="scss">
.el-dropdown-link {
	cursor: pointer;
	color: var(--el-color-primary);
	display: flex;
	align-items: center;
}
.infomation .btnReturn {
	position: absolute;
	top: 15px;
	right: 15px;
}
.result .btnReturn {
	position: absolute;
	top: 15px;
	right: 15px;
}
.descriptions {
	width: 100%;
	:deep(.el-descriptions__content) {
		width: 100%;
		word-break: break-all;
	}
}
.tables {
	.btnOne {
		color: #9fdb1d;
		border-color: #9fdb1d;
		background: #fcffe8;
	}
	.btnTwo {
		color: #fadc19;
		border-color: #fadc19;
		background: #feffe8;
	}
	.btnFour {
		color: #722ed1;
		border-color: #722ed1;
		background: #f5e8ff;
	}
	.btnFive {
		color: #3491fa;
		border-color: #3491fa;
		background: #e8f7ff;
	}
	.btnSix {
		color: #f77234;
		border-color: #f77234;
		background: #fff3e8;
	}
}
</style>